import React, {PureComponent} from "react";
import {connect} from "react-redux";
import imgUrl from "../../img/dark_heart.jpg";

import 'antd/dist/antd.css'
import {Pagination} from "antd";
import {actionCreator} from "./store";

//用来写 搜索框 和 文章的列表的描写
class PubRightWrapper extends PureComponent {


    constructor(props) {
        super(props);
        this.getArtLiItem = this.getArtLiItem.bind(this);
        this.changeIndexClick = this.changeIndexClick.bind(this);
    }

    render() {

        return (
            <div style={rightWrapper} id={"pubRightWrapper"}>
                <p style={rightStatementStyle}>
                    为保障号主利益，更新文章有一定的延迟(仅录入技术类)，且所有数据都对外提供了
                    <a href={"https://www.baidu.com"}>开放 API</a>，方便大家做app，<br/>小程序等。
                </p>
                <div style={rightSearchWrapper}>
                    <input placeholder={"请输入搜索内容"} style={rightSearchInputStyle}/>
                    <span style={rightSearchSpanStyle}>搜索</span>
                </div>
                <ul style={rightUlWrapper}>

                    {
                        this.getArtLiItem()
                    }

                </ul>

               <div style={pageBottomStyle}>
                   <Pagination
                       defaultPageSize={1}
                       total={this.props.pageTotalCount}
                       onChange={(page,size)=>{
                           this.changeIndexClick(page,size);
                       }}
                   />
               </div>

            </div>
        );
    }


    getArtLiItem() {
        const pubArticleList = this.props.showArticleList;
        console.log("布局的改变");
        console.log(pubArticleList);

        if (pubArticleList.size > 0) {
            return pubArticleList.map((item, index) => {
                return (
                    <li style={liItemStyle} key={item.get("id")}>

                        <img style={loveHeartNormalStyle} src={imgUrl} alt={"alt"}/>

                        <div style={articleWrapperStyle}>
                            <div style={articleTitleStyle} dangerouslySetInnerHTML={{__html: item.get("title")}}/>
                            <div style={articleBodyStyle}>
                                {`时间:${item.get("niceDate")}`}
                            </div>
                        </div>

                    </li>
                );
            })
        } else {
            return null;
        }
    }

    changeIndexClick=(page,size)=>{

        document.documentElement.scrollTop = 0;

        const currentAuthor = this.props.pubAuthorList.get(this.props.pubChoiceIndex);
        const id = currentAuthor.get("id");
        const pubArticleMap = this.props.pubArticleMap;
        if (pubArticleMap.has(id)){
            if (pubArticleMap.get(id).has(page)){
                this.props.changeArtList(id,page);
            } else {
                this.props.requestArtList(id,page);
            }
        }

    }
}

const mapState = (state) => {

    return {
        showArticleList: state.getIn(["publicReducer", "showArticleList"]),
        pageTotalCount: state.getIn(["publicReducer", "pageTotalCount"]),
        pubArticleMap: state.getIn(["publicReducer", "pubArticleMap"]),
        pubChoiceIndex: state.getIn(["publicReducer", "pubChoiceIndex"]),
        pubAuthorList: state.getIn(["publicReducer", "pubAuthorList"]),
    }
};

const dispatchState = (dispatch) => {
    return {
        requestArtList(id, page) {
            const action = actionCreator.requestAuthorArticleList(id, page);
            dispatch(action);
        },changeArtList(id,page) {
        const action = actionCreator.saveAuthorArticleList(id, page, null);
        dispatch(action);
    }
    }
};

export default connect(mapState, dispatchState)(PubRightWrapper);

const rightWrapper = {
    float: "left",
    overflow: "hidden",
    marginBottom: "30px",
};

const rightStatementStyle = {
    width: 740,
    height: 58,
    color: "#767676",
    borderLeft: "solid 2px #cdcdcd",
    boxSizing: "border-box",
    backgroundColor: "#f8f8f8",
    marginTop: 30,
    paddingTop: 14,
    wordWrap: "break-word",
    wordBreak: "break-all",
    fontSize: 14,
    paddingLeft: 10,
    lineHeight: "20px",
};

const rightSearchWrapper = {
    marginTop: 30,
    height: 36,
    marginLeft: 110,
};

const rightSearchInputStyle = {
    width: 390,
    height: 36,
    border: "solid 1px #adadad",
    boxSizing: "border-box",
    fontSize: 16,
    padding: 4,
    float: "left",
    display: "block",
};

const rightSearchSpanStyle = {
    width: 100,
    height: 36,
    float: "left",
    display: "block",
    boxSizing: "border-box",
    fontSize: 16,
    backgroundColor: "#3498db",
    textAlign: "center",
    lineHeight: "36px",
    color: "#fff",
    border: "solid 1px #3498db"
};

const rightUlWrapper = {
    marginTop: 30,
};

const liItemStyle = {
    display: "block",
    height: 70,
    borderBottom: "solid 1px #e2e2e2",
    paddingLeft: 10,
    cursor: "pointer",
};

const loveHeartNormalStyle = {
    float: "left",
    marginTop: 26,
};

const articleWrapperStyle = {
    float: 'left',
    marginLeft: 10,
    marginTop: 12,
};

const articleTitleStyle = {
    color: "#2e3135",
    fontSize: 16,
    fontWeight: 'bold',
};

const articleBodyStyle = {
    marginTop: 6,
};


const pageBottomStyle = {
    margin:20,

};